// 暂时禁用 SVGA 功能，避免文件过大问题
// 你可以稍后使用 CDN 方式引入 SVGA 库

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 配置对象
    configObj: {
      type: Object,
      value: {
        svgaPath: '',
        cWidth: 0,
        cHeight: 0,
        top: 0,
        left: 0,
        zIndex: 0,
      }
    },
    // 是否循环播放
    needLoop: {
      type: Boolean,
      value: true
    },
    // 播放帧范围，格式：'0,10' 表示播放0-10帧
    rangeStr: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 动画是否加载完毕
    isAniLoaded: false,
    // 标识父组件是否需要播放动画
    needPlayAni: false,
    // Canvas 尺寸
    canvasWidth: 300,
    canvasHeight: 300,
    // 容器样式
    cStyle: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 初始化 SVGA 播放器
     */
    initSVGAPlayer() {
      const that = this;
      
      console.log('SVGA 功能暂时禁用，避免文件过大问题');
      console.log('动画文件路径:', this.properties.configObj.svgaPath);
      
      // 模拟动画完成事件
      setTimeout(() => {
        that.triggerEvent('svgaEffectCommonFinished');
      }, 2000); // 2秒后触发完成事件
    },

    /**
     * 加载动画
     */
    loadAnimation() {
      const that = this;
      
      that.parser.load(
        this.properties.configObj.svgaPath,
        (videoItem) => {
          that.SVGAPlayer.setVideoItem(videoItem);
          
          // 循环的情况下自动播放
          if (that.properties.needLoop) {
            that.SVGAPlayer.startAnimation();
          } else {
            // 不循环的情况下设置加载完成状态
            that.setData({
              isAniLoaded: true
            });
            
            // 设置动画完成回调
            that.SVGAPlayer.onFinished(() => {
              that.triggerEvent('svgaEffectCommonFinished');
            });
          }
        },
        (err) => {
          console.error('SVGA 动画加载失败:', err);
          that.triggerEvent('svgaLoadError', { error: err });
        }
      );
    },

    /**
     * 父组件通知子组件可以播放动画了
     */
    canPlayAni() {
      this.setData({
        needPlayAni: true
      });
    },

    /**
     * 播放动画
     * 只有非循环模式下用到
     */
    playAnimation() {
      if (!this.SVGAPlayer) {
        console.warn('SVGA 播放器未初始化');
        return;
      }

      const rangeStr = this.properties.rangeStr;
      if (rangeStr) {
        const rangeArr = rangeStr.split(',');
        this.SVGAPlayer.startAnimationWithRange({
          location: parseInt(rangeArr[0]),
          length: parseInt(rangeArr[1]) - parseInt(rangeArr[0])
        });
      } else {
        this.SVGAPlayer.startAnimation();
      }
    },

    /**
     * 暂停动画
     */
    pauseAnimation() {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.pauseAnimation();
      }
    },

    /**
     * 停止动画
     */
    stopAnimation() {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.stopAnimation();
      }
    },

    /**
     * 清空画布
     */
    clear() {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.clear();
      }
    },

    /**
     * 跳转到指定帧
     */
    stepToFrame(frame, andPlay = false) {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.stepToFrame(frame, andPlay);
      }
    },

    /**
     * 跳转到指定百分比
     */
    stepToPercentage(percentage, andPlay = false) {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.stepToPercentage(percentage, andPlay);
      }
    },

    /**
     * 设置动态图像
     */
    setImage(image, key, transform) {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.setImage(image, key, transform);
      }
    },

    /**
     * 设置动态文本
     */
    setText(text, key) {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.setText(text, key);
      }
    },

    /**
     * 清空动态对象
     */
    clearDynamicObjects() {
      if (this.SVGAPlayer) {
        this.SVGAPlayer.clearDynamicObjects();
      }
    },

    /**
     * 获取 SVGAPlayer 实例
     */
    getSVGAPlayer() {
      return this.SVGAPlayer;
    },

    /**
     * 计算容器样式
     */
    calculateStyle() {
      const config = this.properties.configObj;
      let style = '';
      
      if (config.cWidth) {
        style += `width: ${config.cWidth}px;`;
      }
      if (config.cHeight) {
        style += `height: ${config.cHeight}px;`;
      }
      if (config.top) {
        style += `top: ${config.top}px;`;
      }
      if (config.left) {
        style += `left: ${config.left}px;`;
      }
      if (config.zIndex) {
        style += `z-index: ${config.zIndex};`;
      }
      
      return style;
    },

    /**
     * 更新 Canvas 尺寸
     */
    updateCanvasSize() {
      const config = this.properties.configObj;
      const width = config.cWidth || 300;
      const height = config.cHeight || 300;
      
      this.setData({
        canvasWidth: width,
        canvasHeight: height
      });
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      // 组件实例进入页面节点树时执行
      this.updateCanvasSize();
      this.setData({
        cStyle: this.calculateStyle()
      });
    },

    ready() {
      // 组件在视图层布局完成后执行
      // 使用 setTimeout 替代 Vue 的 $nextTick
      setTimeout(() => {
        this.initSVGAPlayer();
      }, 0);
    },

    detached() {
      // 组件实例被从页面节点树移除时执行
      if (this.SVGAPlayer) {
        this.SVGAPlayer.stopAnimation();
        this.SVGAPlayer.clear();
        this.SVGAPlayer = null;
      }
    }
  },

  /**
   * 数据监听器
   */
  observers: {
    'isAniLoaded, needPlayAni': function(isAniLoaded, needPlayAni) {
      if (isAniLoaded && needPlayAni) {
        this.playAnimation();
      }
    }
  },

  /**
   * 组件所在页面的生命周期
   */
  pageLifetimes: {
    show() {
      // 页面被展示时执行
    },
    hide() {
      // 页面被隐藏时执行
      if (this.SVGAPlayer) {
        this.SVGAPlayer.pauseAnimation();
      }
    }
  }
});
